{% extends "../base.html" %}
{% block content %}
  <div class='flex-row-between align-items-start' id='content-main'>
    <div class='con-list'>
      <div class='course-title-desc'>
        <div class='flex-row-between'>
          {% if course.avatar_id != 1 %}
          <img src="{{course.avatar_url}}" width='256' height='175' />
          {% else %}
          <div class="course-item-avatar">{{course.course_name}}</div>
          {% endif %}
          <div id='course-info' class='flex-column-between'>
            <div class="title24">
              {{course.course_name}}
            </div>
            <div class='flex-row-between'>
              <span class="title18">
              {% for teacher in course.teacher_set %}
                {{ teacher.name }} &nbsp;
              {% endfor %}
              </span>
              <div>
               {% if course.course_type == 1 %}
                <span class="btn-tag">公选课</span>
                {% else %}
                <span class="btn-tag">专业课</span>
                {% endif %}
              </div> 
            </div>
            <div class='flex-row-between'>
              <div>
                {% if course.choiced %}
                  <span onclick=goUrl("{% url 'study:studying' pk=course.id %}") class="btn-long">继续学习</span>
                {% else %}
                  {% if course.course_type == 1 %}
                  <span onclick=goUrl("{% url 'study:buyCourse' pk=course.id %}") class="btn-long">选课</span>
                  {% else %}
                  <span onclick=goUrl("{% url 'study:buyCourse' pk=course.id %}") class="btn-long">购买</span>
                  {% endif %}
                {% endif %}
              </div>
              <div class='course-student-count'>
                <img width="27" height="27" src='/static/study/images/user47.png' />
                <span class="title18">{{course.student_count}}人</span>
              </div>
            </div>
          </div>
        </div>
        <div class='course-hour-score flex-row-between title18'>
          <span> 理论课时: {{course.theo_hours}} </span>
          <span> 实践课时: {{course.prac_hours}} </span>
          <span> 学分: {{course.credit}} </span>
          <span> 成绩: -- </span>
        </div>
      </div>
      <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
          <li class="layui-this" lay-id="11">课程详情</li>
          <li lay-id="22">课程目录</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
          {% if course.editor == 'H' %}
            {% autoescape off %}
              {{course.describe}}
            {% endautoescape %}
          {% elif course.editor == 'M' %}
            {% load markdownify %}
            {{course.describe|markdownify}}
          {%endif%}
          </div>
          <div class="layui-tab-item">
            {% include '../components/course_chapter_tree.html' %}
          </div>
        </div>
      </div>
    </div>
    {% comment %} <div class='con-rec'>
      {% include '../components/more_course.html' %}
      {% include '../components/more_experiment.html' %}
      {% include '../components/more_exam.html' %}
    </div> {% endcomment %}
  </div>
<script src="/static/study/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('element', function(){
  var $ = layui.jquery
  ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
});
</script>
            
{% endblock %}